<template>
  <div class="app-container teacher_detail_root">
    <div class="teacher_detail_wrap">
      <div class="teacher_detail_part">
        <div class="teacher_detail_part1_left" :style="{background: detail.photoPath ? '' : '#f2f3f5'}">
          <img :src="detail.photoPath" v-if="detail.photoPath" alt="">
          <span>{{detail.teacherName}}</span>
        </div>
        <div class="teacher_detail_part1_right">
          <div class="teacher_name">
            {{detail.teacherName}}
            <div class="teacher_status">{{detail.status === 1 ? '在职' : '离职'}}</div>
          </div>
          <div class="teacher_status_wrap">
            <span class="label">职称/职务：</span>
            <span>{{detail.title}}</span>
          </div>
          <div class="teacher_no">
            <span>
              <span class="label">性别：</span>
              {{detail.gender === 1 ? '男' : '女'}}</span>
            <span>
              <span class="label">工号：</span>
              {{detail.teacherNo}}</span>
          </div>

          <div class="teacher_info_item_wrap">
            <div class="teacher_info_item">
              <span>联系电话</span>
              <div>{{detail.teacherPhone}}</div>
            </div>
            <div class="teacher_info_item">
              <span>电子邮箱</span>
              <div>{{detail.teacherEmail}}</div>
            </div>
          </div>

        </div>
      </div>
      <div class="teacher_detail_part teacher_detail_part1">
        <div class="teacher_desc">教师简介</div>
        <div class="teacher_desc_cont">{{detail.description}}</div>
      </div>
      <div class="teacher_detail_part teacher_detail_part1">
        <div class="teacher_log">操作日志</div>
        <div class="teacher_desc">
          <div class="teacher_table_wrap">
            <el-form :model="logParams" ref="queryForm" size="small" :inline="true" style="flex:1;display: flex;flex-wrap: nowrap;align-items: center;justify-content: flex-start;margin-right: 32px;">
              <el-form-item label="交易类型名称" prop="teacherNo">
                <el-input
                  v-model="logParams.title"
                  placeholder="请输入交易类型名称"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="时间" prop="teacherName">
                <el-date-picker
                  v-model="dateRange"
                  style="width: 100%"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                ></el-date-picker>
              </el-form-item>
              <el-form-item>
                <div style="display:flex;align-items:center;">
                  <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                  <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
            >导出</el-button>
          </div>
        </div>
        <div class="teacher_log">
          <el-table
            :data="logList"
            style="width: 100%">
            <el-table-column type="index" width="140" align="center" label="序号" />
            <el-table-column
              prop="title"
              label="更新内容"
              align="center">
            </el-table-column>
            <el-table-column
              prop="operTime"
              label="更新时间"
              width="280"
              align="center">
            </el-table-column>
          </el-table>
          <pagination
            v-show="logTotal>0"
            :total="logTotal"
            :page.sync="logParams.pageNum"
            :limit.sync="logParams.pageSize"
            @pagination="getApiLogList"
          />
        </div>
      </div>
      <div class="teacher_detail_part teacher_detail_part1">
        <div class="teacher_log">教学单元列表</div>
        <div class="teacher_desc">
          <el-form :model="teachingUnitParams" ref="queryForm" size="small" :inline="true" style="flex:1;display: flex;align-items: center;justify-content: flex-start;">
            <el-form-item label="课程名称" prop="courseName">
              <el-input
                v-model="teachingUnitParams.courseName"
                placeholder="请输入课程名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="时间" prop="dateRange1">
              <el-date-picker
                v-model="dateRange1"
                style="width: 100%"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <div style="display:flex;align-items:center;">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery1">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">重置</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="teacher_table">
          <el-table
            :data="teachingUnitList"
            style="width: 100%">
            <el-table-column
              prop="courseName"
              label="课程名称"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="className"
              label="教学班级"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="classHour"
              align="center"
              label="课时">
                <template slot-scope="scope">
                  <span>{{scope.row.classHour}}课时</span>
                </template>
            </el-table-column>
            <el-table-column
              prop="studentNumber"
              align="center"
              label="学生人数">
            </el-table-column>
<!--            <el-table-column-->
<!--              prop="chapterStatus"-->
<!--              align="center"-->
<!--              label="状态">-->
<!--              <template slot-scope="scope">-->
<!--                <span class="button-status" :class="scope.row.chapterStatus == 0 ? 'status0':scope.row.chapterStatus == 1 ? 'status1':scope.row.chapterStatus == 2 ? 'status2':scope.row.chapterStatus == 3 ? 'status3':scope.row.chapterStatus == 4 ? 'status4':''">{{scope.row.chapterStatus == 0 ? '删除':scope.row.chapterStatus == 1 ? '未备课':scope.row.chapterStatus == 2 ? '已备课':scope.row.chapterStatus == 3 ? '已授课':scope.row.chapterStatus == 4 ? '授课中':''}}</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
<!--              <template slot-scope="scope">-->
<!--                <el-button-->
<!--                  size="mini"-->
<!--                  type="text"-->
<!--                  icon="el-icon-view"-->
<!--                  @click="handleUpdate(scope.row)"-->
<!--                ></el-button>-->
<!--              </template>-->
<!--            </el-table-column>-->
          </el-table>
          <pagination
            v-show="teachingUniTotal>0"
            :total="teachingUniTotal"
            :page.sync="teachingUnitParams.pageNum"
            :limit.sync="teachingUnitParams.pageSize"
            @pagination="getTeachingUnitList"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {apiLogList, getTeacher, teachingUnitList} from "@/api/classai/teacher";

export default {
  name: "TeacherDetail",
  dicts: ['classai_common_status', 'teacher_sex', 'teacher_title'],
  data() {
    return {
      detail: {},
      logTotal: 0,
      teachingUniTotal: 0,
      logList:[],
      dateRange:'',
      dateRange1:'',
      teachingUnitList:'',
      logParams: {
        userId:'',
        title:'',
        startTime:'',
        endTime:'',
        pageNum: 1,
        pageSize: 10
      },
      teachingUnitParams: {
        courseName:'',
        startTime:'',
        endTime:'',
        teacherId:'',
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  created() {
    this.getData()

  },
  methods: {
    getData() {
      getTeacher(this.$route.query.id).then(response => {
        this.detail = response.data;
        this.teachingUnitParams.teacherId = response.data.id
        this.logParams.userId = response.data.id
        this.getTeachingUnitList()
        this.getApiLogList()
      });
    },
    getApiLogList() {
      apiLogList(this.logParams).then(response => {
        this.logList = response.rows
        this.logTotal = response.total;
      });
    },
    getTeachingUnitList() {
      teachingUnitList(this.teachingUnitParams).then(response => {
        this.teachingUnitList = response.rows
        this.teachingUniTotal = response.total;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.logParams.pageNum = 1;
      if(this.dateRange.length>0){
        this.logParams.startTime = this.dateRange[0]
        this.logParams.endTime = this.dateRange[1]
      }

      this.getApiLogList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.logParams.title = ''
      this.logParams.startTime = ''
      this.logParams.endTime = ''
      this.logParams.pageNum = 1
      this.logParams.pageSize = 10
      this.dateRange = []
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery1() {
      this.teachingUnitParams.pageNum = 1;
      if(this.dateRange1.length>0){
        this.teachingUnitParams.startTime = this.dateRange1[0]
        this.teachingUnitParams.endTime = this.dateRange1[1]
      }

      this.getTeachingUnitList();
    },
    /** 重置按钮操作 */
    resetQuery1() {
      this.teachingUnitParams.courseName = ''
      this.teachingUnitParams.startTime = ''
      this.teachingUnitParams.endTime = ''
      this.teachingUnitParams.pageNum = 1
      this.teachingUnitParams.pageSize = 10
      this.dateRange1 = []
      this.handleQuery1();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/apiLog/export', {
        ...this.logParams
      }, `post_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style lang="scss" scoped>
.teacher_detail_root {
  background: #f3f4f6;
  flex: 1;
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .teacher_detail_wrap {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 6px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    .teacher_detail_part {
      width: 100%;
      display: flex;
      padding: 24px;
      gap: 0px 0px;
      flex-wrap: wrap;
      align-content: flex-start;
      border-bottom: 1px solid #E5E7EB;
      box-sizing: border-box;
      .teacher_log {
        font-size: 18px;
        color: #1F2937;
        font-weight: 600;
        margin-bottom: 10px;
      }
      .teacher_detail_part1_left {
        width: 128px;
        height: 128px;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #333;
      }
      .teacher_detail_part1_right {
        flex: 1;
        overflow: hidden;
        padding: 0 24px;
        box-sizing: border-box;
        .label {
          font-size: 14px;
          color: #6B7280;
        }
        .teacher_name {
          font-size: 24px;
          font-weight: bold;
          line-height: 32px;
          letter-spacing: normal;
          color: #1F2937;
          display: flex;
          align-items: center;
          gap: 16px;
          .teacher_status {
            padding: 4px 12px;
            border-radius: 20px;
            background: #DCFCE7;
            font-size: 14px;
            font-weight: normal;
            line-height: 20px;
            letter-spacing: normal;
            color: #166534;
          }
        }
        .teacher_no {
          margin-top: 8px;
          font-size: 16px;
          font-weight: normal;
          line-height: 24px;
          letter-spacing: normal;
          color: #4B5563;
          display: flex;
          align-items: center;
          gap: 20px;
        }
        .teacher_status_wrap {
          display: flex;
          margin-top: 8px;
          align-items: center;
          font-size: 16px;
          font-weight: normal;
          line-height: 24px;
          letter-spacing: normal;
          color: #374151;
        }
        .teacher_info_item_wrap {
          display: flex;
          width: 100%;
          margin-top: 8px;
          .teacher_info_item {
            flex: 1;
            font-size: 16px;
            font-weight: normal;
            letter-spacing: normal;
            color: #1F2937;
            span {
              font-size: 14px;
              color: #6B7280;
              margin-bottom: 10px;
            }
          }
        }
      }
      .teacher_desc {
        width: 100%;
        font-size: 18px;
        font-weight: 600;
        color: #1F2937;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        > div {
          flex-shrink: 0;
        }
        .teacher_table_wrap {
          flex: 1;
          overflow: hidden;
        }
      }
      .teacher_desc_cont {
        max-height: 100px;
        font-size: 16px;
        line-height: 26px;
        color: #374151;
        margin-top: 12px;
        overflow-y: auto;
      }
    }
    .teacher_detail_part1 {
      flex-direction: column;
      .teacher_log {
        .teacher_log_item {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 16px;
          margin-top: 15px;
          .teacher_log_item_1 {
            background: #F3F4F6;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              width: 12px;
              height: 12px;
            }
          }
          .teacher_log_item_2 {
            flex: 1;
            font-size: 16px;
            font-weight: 500;
            color: #1F2937;
            .dv {
              font-size: 14px;
              line-height: 20px;
              color: #6B7280;
            }
          }
          .teacher_log_item_3 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            img {
              width: 16px;
              height: 16px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  ::v-deep {
    .el-form-item__label {
      flex-shrink: 0;
    }
  }
}

.el-form-item--small.el-form-item{
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.button-status{
  font-size: 12px;
  padding: 4px 8px;
  box-sizing: border-box;
  border-radius: 15px;
}
.status0{
  color: rgb(245, 108, 108);
  background: rgb(254, 240, 240);
}
.status1{
  color: #854D0E;
  background: #FEF9C3;
}
.status2{
  color: rgb(144, 147, 153);
  background: rgb(244, 244, 245);
}
.status3{
  color: #166534;
  background: #DCFCE7;
}
.status4{
  color: #1E40AF;
  background: #DBEAFE;
}
</style>
